{% extends "frontend/base.html" %}
{% load static %}

{% block content %}
  <div class="Middle Middle_top">
    <div class="Middle-top">
      <div class="wrap">
        <div class="Middle-header">
          <h1 class="Middle-title">Профиль
          </h1>
          <ul class="breadcrumbs Middle-breadcrumbs">
            <li class="breadcrumbs-item"><a href="/">home</a>
            </li>
            <li class="breadcrumbs-item breadcrumbs-item_current"><span>Профиль</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="Section Section_column Section_columnLeft">
      <div class="wrap">
        <div class="Section-column">
          <div class="Section-columnSection">
            <header class="Section-header">
              <strong class="Section-title">Навигация
              </strong>
            </header>
            <div class="Section-columnContent">
              <div class="NavigateProfile">
                <ul class="menu menu_vt">
                  <li class="menu-item"><a class="menu-link" href="/profile">Профиль</a>
                  </li>
                  <li class="menu-item"><a class="menu-link" href="/history-order">История заказов</a>
                  </li>
<!--                  <li class="menu-item"><a class="menu-link" href="/historyview">История просмотра</a>-->
<!--                  </li>-->
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="Section-content">
          <div class="Profile">
              <div class="row">
                  <div class="row-block">
                    <form action="" @submit.prevent="changeProfile">
                    <div class="form-group">
                      <label class="form-label" for="avatar">Аватар
                      </label>
                      <div v-if="!avatar" class="Profile-avatar Profile-avatar_noimg" >
                        <label class="Profile-fileLabel" for="avatar">Выберите аватар</label>
                          <input class="Profile-file form-input" @change="setAvatar" @click="$event.target.value = null" type="file" id="avatar" name="avatar" type="file" data-validate="onlyImgAvatar"/>
                      </div>
                      <div v-else class="Profile-img" @click="clearAvatar">
                        <img :src="avatar.src" :alt="avatar.alt"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="form-label" for="name">ФИО</label>
                      <input class="form-input" id="name" name="name" type="text" required v-model="fullName"/>
                    </div>
                    <div class="form-group">
                      <label class="form-label" for="phone">Телефон</label>
                      <input class="form-input" id="phone" name="phone" type="tel" required v-model="phone" />
                    </div>
                    <div class="form-group">
                      <label class="form-label" for="mail">E-mail</label>
                      <input class="form-input" id="mail" name="mail" type="email" required v-model="email" />
                    </div>
                    <div class="form-group">
                    <div class="form-group">
                        <button class="btn btn_success" type="submit">Сохранить</button>
                    </div>
                    </div>
                    </form>
                  </div>

                  <div class="row-block">
                    <form action="" @submit.prevent="changePassword">
                    <div class="form-group">
                      <label class="form-label" for="passwordCurrent">Текущий пароль</label>
                      <input class="form-input" id="passwordCurrent" name="passwordCurrent" type="password" placeholder="Введите текущий пароль" v-model="passwordCurrent"/>
                    </div>
                      <div class="form-group">
                      <label class="form-label" for="password">Пароль</label>
                      <input class="form-input" id="password" name="password" type="password" placeholder="Тут можно изменить пароль" v-model="password"/>
                    </div>
                    <div class="form-group">
                      <label class="form-label" for="passwordReply">Подтверждение пароля</label>
                      <input class="form-input" id="passwordReply" name="passwordReply" type="password" placeholder="Введите пароль повторно" v-model="passwordReply"/>
                    </div>
                    <div class="form-group">
                        <button class="btn btn_success" type="submit">Сохранить</button>
                    </div>
                    </form>
                  </div>

              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block mixins %}
<!-- TODO prod -->
<!--<script>var pk = {{request.user.pk}}</script>-->

<!-- TODO test -->
<script>var pk = 7</script>
<script src="{% static 'frontend/assets/js/profile.js' %}"></script>
{% endblock %}